<script>
// jquery is very cool...
// This method is called after a new task is created or an existing task is marked as completed (or reversed to incomplete) via AJAX.
// This inserts the the new task form to the appropriate div (specified as list_id) by calling the edit page, and removing the old form on an update, then rebinds the jquery events (so further updates against the new form can be hooked).
function render_edit(task_id, list_id) {
	// add the new task edit form
	$.ajax({
        url: '/tasks/' + task_id + '/edit',
        dataType: "html",
        beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/html");},
        success: function(data) {
        	// check to see if the task already exists in the dom, and remove it if it does.
			var obj = $('#task_' + task_id)
			if (obj) {
				obj.remove();
			}
			
			// append the html
            $(list_id).append(data);
            
            // rebind the forms to the jquery event tree
            // TODO - switch this to event bubbling for better performance on long lists.
      		bindEditForms();
      		bindDestroyLinks();
        }
      });
}
</script>

<h2>Create New Task</h2>
<p>
  	<% form_for :task, Task.new, :html => { :class => 'new' } do |form| -%>
  		<%= check_box_tag 'task[completed]', '1' %>
		<%= form.text_field :name, :class => 'task_name' %>
		<%= form.select :worth, [1,2,5,10] %>
		&nbsp;<%= image_submit_tag 'icons/tag_blue_add.png' %>
		<%= image_tag('icons/spinner.gif', :style => 'display: none', :id => "spinner_create") %>
	<% end -%>
</p>

<p>&nbsp;</p>
<h2>Outstanding</h2>
<div id="incomplete_task_list">
	<%= render :partial => 'edit', :collection => @incomplete_tasks %>
</div>

<p>&nbsp;</p>
<h2>Recently completed</h2>
<div id="completed_task_list">
	<%= render :partial => 'completed', :collection => @completed_tasks %>
</div>

<p>&nbsp;</p>
<p><b><%= link_to 'Destroy All Completed Tasks', destroy_completed_tasks_path, :class => 'destroy' %></b></p>